<template>
  <div>
    {{ value }}
    <el-select
      size="mini"
      multiple
      clearable
      placeholder="全部"
      v-model="value"
      @change="handleChange($event, value)"
    >
      <el-option
        v-for="item in children"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
        {{ item.name }}
        <font color="red" v-if="isDev">{{ item.id }}</font>
      </el-option>
      <el-option :label="spLabel" :value="postParams.SPVALUE">
        <b>{{ spLabel }}</b>
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "imTagsSelect",
  computed: {
    ...mapState(["paramsResetFlag", "postParams"]),
  },
  watch: {
    paramsResetFlag: function (nv, ov) {
      //监听复位标识
      this.value.splice(0, this.value.length); //本体数据复位
      this.updata2Store(); //通知$store数据修改
    },
  },
  props: {
    spLabel: {
      type: String,
      default: function () {
        return "反选以上";
      },
    },
    parent: {
      type: Object,
      default: function () {
        return { pid: 0, pname: "标签名" };
      },
    },
    children: {
      type: Array,
      default: function () {
        return [{ pid: 0, id: 0, name: "子选项", typeId: 0 }];
      },
    },
  },
  data() {
    return {
      isDev: process.env.NODE_ENV == "development",
      value: [],
    };
  },
  methods: {
    handleChange: function ($event, value) {
      console.log(
        "%c [ $event, value ]-70",
        "font-size:13px; background:pink; color:#bf2c9f;",
        $event,
        value
      );
      let sp = this.postParams.SPVALUE;
      if (value.includes(sp)) {
        this.value.splice(0, this.value.length, sp);
      }
      this.updata2Store();
    },
    updata2Store: function () {
      console.log(this.parent);
      console.log(this.value);
      this.$store.commit("postParams/setSelfTag", {
        pid: this.parent.pid,
        arr: this.$_.cloneDeep(this.value),
      });
    },
  },
};
</script>

<style lang="less" scoped></style>